<template>
    <div class="red_limit_container">
        <!-- 查询条件 -->
        <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
        <!-- 查询结果 -->
        <ZwTable
            ref="tableRef"
            class="table-box"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()">
            <template #headerOperate>
                <el-button v-auth="'CUSTOMER_QUOTA'" @click="openAddCustomer">客户限额</el-button>
                <el-button v-auth="'ADD_STAFF_QUOTA'" type="primary" @click="addstaff('', 'add')"
                    >添加员工限额</el-button
                >
            </template>
        </ZwTable>
    </div>
    <!-- 删除弹框 -->
    <ZWDeletdialog ref="DeletdialogRef" @submit="onSubmit" />
    <!-- 添加客户限额 -->
    <AddCustomer ref="AddCustomerRef" :source-arr="sourceArr" @save="getListFun" />
    <!-- 添加员工限额 -->
    <ImportCustomer ref="ImportCustomerRef" @cancel="closeImportCustomer" @save="getListFun" />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, nextTick, onMounted } from 'vue';

import { deepCopy } from '@/utils/helper';
import { ElMessage, ElImage, ElIcon, ElButton } from 'element-plus';
import ZWDeletdialog from '@/components/ZWDeletdialog.vue';
import ImportCustomer from './components/ImportCustomer.vue';
import AddCustomer from './components/AddCustomer.vue';
import { getlimitlist, getlimitchange, getlimitdel } from '@/api/employe/redmanage/redmanageWord';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import { tableH, reSize } from '@/utils/utils';
const delId = ref('');
const DeletdialogRef: any = ref(null);

const ImportCustomerRef = ref({});
const AddCustomerRef = ref({});
const isShow = ref(0);
const defaultParams = {
    work_user_search: ''
    // department_id: []
};

const tableRef = ref<HTMLElement | null>(null);
// 获取表格高度
const getTableH = () => {
    nextTick(() => {
        tableRef.value.getTableH();
    });
};

const state = reactive({
    searchParams: deepCopy(defaultParams)
});

const searchOption = computed(() => {
    return [
        {
            label: '员工搜索',
            name: 'work_user_search',
            value: '',
            type: 'input',
            placeholder: '请输入员工名称'
        },
        {
            label: '部门筛选',
            name: 'department_id',
            value: [],
            type: 'select',
            placeholder: '全部',
            multiple: true,
            popperClass: 'zw-hide_select_option',
            isUserSelect: true,
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        }
    ];
});

const search = v => {
    state.searchParams = v;
};

const reset = v => {
    state.searchParams = deepCopy(defaultParams);
};

const tableOption = [
    {
        prop: 'work_user_name',
        label: '员工信息',
        minWidth: 200
    },
    {
        prop: 'limit_amount',
        label: '员工限额',
        minWidth: 400,

        render({ row, column, index }) {
            return `单${row.limit_type_value}：发放次数${row.limit_number}次；发放金额${row.limit_amount}元`;
        }
    },
    {
        prop: 'limit_status_value',
        label: '状态',
        width: 200
    },
    {
        prop: 'created_name',
        label: '添加人',
        width: 200
    },
    {
        prop: 'created_at',
        label: '添加时间',
        minWidth: 200
    },
    {
        prop: 'operate',
        label: '操作',
        width: 300,
        fixed: 'right',
        isOperate: true,
        option({ row }) {
            return [
                {
                    id: 0,
                    name: row.limit_status === 1 ? '禁用' : '启用',
                    authCode: 'DISABLE',
                    click: (row, column, index) => {
                        // console.log('表格行数据', row, column, index)
                        delId.value = row.id;
                        if (row.limit_status == 1) {
                            onChange(1);
                        } else {
                            onChange(0);
                        }
                    }
                },
                {
                    id: 2,
                    name: '编辑',
                    authCode: 'EDIT',
                    click: row => {
                        // delId.value = row.id
                        // onChange(2)
                        addstaff(row, 'edit');
                    }
                },
                {
                    id: 2,
                    name: '删除',
                    authCode: 'DEL',
                    click: row => {
                        delId.value = row.id;
                        onChange(2);
                    }
                }
            ];
        }
    }
];
const onChange = (num: number) => {
    switch (num) {
        case 0:
            DeletdialogRef.value.appDialog.title = '启用提醒';
            DeletdialogRef.value.content = '确认启动吗？';
            break;
        case 1:
            DeletdialogRef.value.appDialog.title = '禁用提醒';
            DeletdialogRef.value.content = '确认禁用吗？';
            break;
        case 2:
            DeletdialogRef.value.appDialog.title = '删除提醒';
            DeletdialogRef.value.content = '确认删除吗？';
            break;
    }
    isShow.value = num;
    DeletdialogRef.value.appDialog.visible = true;
};
const onSubmit = async () => {
    switch (isShow.value) {
        case 0:
            await getlimitchange({ id: delId.value, limit_status: 1 });
            ElMessage.success('启动成功');
            DeletdialogRef.value.appDialog.visible = false;
            tableRef.value.reload();
            break;
        case 1:
            await getlimitchange({ id: delId.value, limit_status: 2 });
            ElMessage.success('禁用成功');
            DeletdialogRef.value.appDialog.visible = false;
            tableRef.value.reload();
            break;
        case 2:
            await getlimitdel({ id: delId.value });
            ElMessage.success('删除成功');
            DeletdialogRef.value.appDialog.visible = false;
            tableRef.value.reload();
            break;
    }
};
// 添加客户限额
const openAddCustomer = () => {
    AddCustomerRef.value.drawerData.show = true;
};

const closeImportCustomer = () => {
    ImportCustomerRef.value.appDialog.visible = false;
};
const getListFun = () => {
    tableRef.value.reload();
};
const fetchApi = () => {
    // 获取文件列表
    getTableH();
    return getlimitlist;
};

// 添加员工限额
const addstaff = (val: any, type: string) => {
    if (val) {
        ImportCustomerRef.value.appDialog.userInfo = val;
    } else {
        ImportCustomerRef.value.appDialog.userInfo = {};
    }
    ImportCustomerRef.value.appDialog.controlType = type;
    ImportCustomerRef.value.appDialog.visible = true;
};
onMounted(() => {
    reSize(getTableH);
});
</script>

<style lang="scss" scoped>
.red_limit_container {
    height: calc(100vh - 142px);
    padding: 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}
</style>
